import { StoreContextProvider } from "@/store"
import { functionCommon } from "@whzhuke/common"
import { App, ConfigProvider } from "antd"
import React, { useEffect } from "react"

import { ListProvider } from "@/components/context/list.context"

import common from "@/css/common.module.css"
import en_US from "antd/locale/en_US"
import zh_CN from "antd/locale/zh_CN"
import "dayjs/locale/zh-cn"
import { Outlet } from "react-router"
import { ScrollRestoration } from "react-router-dom"
import { ModalProvider } from "@/components/context/modal.context"
const Locale = "zh-CN"

const Layout: React.FC = () => {
  useEffect(() => {
    const app = document.body.classList
    const { mobile, iPhone, iPad, android, ios, weixin, qq } = functionCommon.browser()
    app.add(Locale)
    mobile ? app.add("mobile") : app.add("pc")
    iPhone && app.add("iPhone")
    iPad && app.add("iPad")
    android && app.add("android")
    ios && app.add("ios")
    weixin && app.add("weixin")
    qq && app.add("qq")
  }, [])

  return (
    <ConfigProvider locale={Locale === "zh-CN" ? zh_CN : en_US}>
      <StoreContextProvider>
        <ListProvider>
          <ModalProvider>
            <ScrollRestoration />
            <App className={common.full}>
              <Outlet />
            </App>
          </ModalProvider>
        </ListProvider>
      </StoreContextProvider>
    </ConfigProvider>
  )
}
export default Layout
